<template>
  <view class="follow-page">

    <!-- 头部区域 -->
    <view class="header-section">
      <view class="icon">📱</view>
      <text class="title">关注公众号</text>
      <text class="subtitle">接收消息推送，不错过任何信息</text>
    </view>

    <!-- 方式一：官方组件（同主体显示场景更宽松） -->
    <view class="method-card">
      <view class="method-header">
        <text class="method-icon">✨</text>
        <text class="method-title">方式一：一键关注</text>
        <text class="badge">推荐</text>
      </view>
      <view class="method-content">
        <text class="tip">点击下方组件即可直接关注</text>
        <!-- 微信官方公众号关注组件 -->
        <official-account></official-account>
      </view>
    </view>

    <!-- 方式二：二维码 -->
    <view class="method-card">
      <view class="method-header">
        <text class="method-icon">📷</text>
        <text class="method-title">方式二：扫码关注</text>
      </view>
      <view class="method-content">
        <text class="tip">长按识别或保存二维码</text>
        <image
          class="qrcode"
          :src="qrcodeUrl"
          mode="aspectFit"
          @longpress="saveQRCode"
        ></image>
        <text class="qrcode-tip">长按图片保存到相册</text>
      </view>
    </view>

    <!-- 绑定说明 -->
    <view class="guide-card">
      <view class="guide-header">
        <text class="guide-icon">💡</text>
        <text class="guide-title">关注后如何绑定？</text>
      </view>

      <view class="guide-steps">
        <view class="step">
          <view class="step-number">1</view>
          <view class="step-content">
            <text class="step-title">关注公众号</text>
            <text class="step-desc">使用上述任一方式关注</text>
          </view>
        </view>

        <view class="step">
          <view class="step-number">2</view>
          <view class="step-content">
            <text class="step-title">发送绑定指令</text>
            <text class="step-desc">在公众号对话框回复：</text>
          </view>
        </view>

        <view class="bind-example">
          <text class="bind-text">绑定 {{ phoneDisplay }}</text>
          <button class="copy-btn" @click="copyBindCommand" size="mini">复制</button>
        </view>

        <view class="step">
          <view class="step-number">3</view>
          <view class="step-content">
            <text class="step-title">完成绑定</text>
            <text class="step-desc">收到绑定成功提示即可</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 权益说明 -->
    <view class="benefits-card">
      <view class="benefits-header">
        <text class="benefits-icon">🎁</text>
        <text class="benefits-title">绑定后可获得</text>
      </view>

      <view class="benefits-list">
        <view class="benefit-item">
          <text class="benefit-icon">📢</text>
          <view class="benefit-content">
            <text class="benefit-title">全国群聊消息推送</text>
            <text class="benefit-desc">第一时间收到群聊新消息</text>
          </view>
        </view>

        <view class="benefit-item">
          <text class="benefit-icon">🏢</text>
          <view class="benefit-content">
            <text class="benefit-title">挂牌信息实时提醒</text>
            <text class="benefit-desc">新的转让信息及时通知</text>
          </view>
        </view>

        <view class="benefit-item">
          <text class="benefit-icon">⚙️</text>
          <view class="benefit-content">
            <text class="benefit-title">系统消息及时推送</text>
            <text class="benefit-desc">重要通知不错过</text>
          </view>
        </view>

        <view class="benefit-item">
          <text class="benefit-icon">🔔</text>
          <view class="benefit-content">
            <text class="benefit-title">推送偏好自由设置</text>
            <text class="benefit-desc">随时开启或关闭通知</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 常见问题 -->
    <view class="faq-card">
      <view class="faq-header">
        <text class="faq-icon">❓</text>
        <text class="faq-title">常见问题</text>
      </view>

      <view class="faq-list">
        <view class="faq-item" @click="toggleFAQ(0)">
          <text class="faq-question">Q: 必须关注公众号吗？</text>
          <text class="faq-toggle">{{ expandedFAQ[0] ? '▼' : '▶' }}</text>
        </view>
        <view v-if="expandedFAQ[0]" class="faq-answer">
          A: 不是必须的，但强烈推荐关注。关注后可以第一时间收到消息推送，不会错过重要信息。
        </view>

        <view class="faq-item" @click="toggleFAQ(1)">
          <text class="faq-question">Q: 如何取消推送？</text>
          <text class="faq-toggle">{{ expandedFAQ[1] ? '▼' : '▶' }}</text>
        </view>
        <view v-if="expandedFAQ[1]" class="faq-answer">
          A: 在公众号对话框回复"关闭通知"即可关闭推送，随时可以回复"开启通知"重新开启。
        </view>

        <view class="faq-item" @click="toggleFAQ(2)">
          <text class="faq-question">Q: 绑定失败怎么办？</text>
          <text class="faq-toggle">{{ expandedFAQ[2] ? '▼' : '▶' }}</text>
        </view>
        <view v-if="expandedFAQ[2]" class="faq-answer">
          A: 请确认手机号是否正确，并且已在小程序中注册。如仍无法绑定，请联系客服。
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 数据
const qrcodeUrl = ref('/static/qrcode.jpg')
const userPhone = ref('')
const expandedFAQ = ref([false, false, false])

// 计算属性
const phoneDisplay = computed(() => {
  if (userPhone.value) {
    return userPhone.value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  }
  return '您的手机号'
})

// 生命周期
onLoad(() => {
  loadUserPhone()
})

// 方法
const loadUserPhone = () => {
  try {
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.phone_number) {
      userPhone.value = userInfo.phone_number
    }
  } catch (e) {
    console.error('获取用户信息失败:', e)
  }
}

const saveQRCode = () => {
  uni.showActionSheet({
    itemList: ['保存二维码到相册'],
    success: (res) => {
      if (res.tapIndex === 0) {
        downloadAndSave()
      }
    }
  })
}

const downloadAndSave = () => {
  uni.showLoading({ title: '保存中...' })

  // 直接保存本地图片,无需下载
  uni.saveImageToPhotosAlbum({
    filePath: qrcodeUrl.value, // 直接使用本地路径 '/static/qrcode.jpg'
    success: () => {
      uni.hideLoading()
      uni.showToast({
        title: '已保存到相册',
        icon: 'success'
      })
    },
    fail: (err) => {
      uni.hideLoading()
      console.error('保存失败:', err)

      if (err.errMsg.includes('auth deny') || err.errMsg.includes('authorize')) {
        uni.showModal({
          title: '需要授权',
          content: '请授权保存图片到相册',
          confirmText: '去设置',
          success: (modalRes) => {
            if (modalRes.confirm) {
              uni.openSetting()
            }
          }
        })
      } else {
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      }
    }
  })
}

const copyBindCommand = () => {
  const command = `绑定 ${userPhone.value || '您的手机号'}`

  uni.setClipboardData({
    data: command,
    success: () => {
      uni.showToast({
        title: '已复制到剪贴板',
        icon: 'success'
      })
    },
    fail: () => {
      uni.showToast({
        title: '复制失败',
        icon: 'none'
      })
    }
  })
}

const toggleFAQ = (index) => {
  expandedFAQ.value[index] = !expandedFAQ.value[index]
}
</script>

<style scoped>
.follow-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #22c55e 0%, #f5f5f5 30%);
  padding: 20rpx;
  padding-bottom: 40rpx;
}

/* 头部区域 */
.header-section {
  text-align: center;
  padding: 60rpx 0 40rpx;
  color: white;
}

.header-section .icon {
  font-size: 100rpx;
  margin-bottom: 20rpx;
}

.header-section .title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.header-section .subtitle {
  display: block;
  font-size: 28rpx;
  opacity: 0.9;
}

/* 方式卡片 */
.method-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.method-header {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.method-icon {
  font-size: 40rpx;
  margin-right: 15rpx;
}

.method-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.badge {
  padding: 6rpx 16rpx;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  font-size: 22rpx;
  border-radius: 20rpx;
}

.method-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tip {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

/* 二维码 */
.qrcode {
  width: 400rpx;
  height: 400rpx;
  border-radius: 12rpx;
  background: #f9f9f9;
  margin: 20rpx 0;
  border: 2rpx dashed #e0e0e0;
}

.qrcode-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 引导卡片 */
.guide-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.guide-header {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.guide-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.guide-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.guide-steps {
  padding: 10rpx 0;
}

.step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
}

.step-number {
  width: 48rpx;
  height: 48rpx;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  font-weight: bold;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  padding-top: 5rpx;
}

.step-title {
  display: block;
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.step-desc {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.bind-example {
  background: #f8f9fa;
  padding: 20rpx 25rpx;
  border-radius: 12rpx;
  margin: 20rpx 0 30rpx 68rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4rpx solid #22c55e;
}

.bind-text {
  font-size: 28rpx;
  color: #22c55e;
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

.copy-btn {
  padding: 8rpx 20rpx;
  background: #22c55e;
  color: white;
  border: none;
  border-radius: 6rpx;
  font-size: 24rpx;
}

/* 权益卡片 */
.benefits-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.benefits-header {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.benefits-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.benefits-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.benefits-list {
  padding: 10rpx 0;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.benefit-item:last-child {
  border-bottom: none;
}

.benefit-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.benefit-content {
  flex: 1;
}

.benefit-title {
  display: block;
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.benefit-desc {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* 常见问题 */
.faq-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.faq-header {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.faq-icon {
  font-size: 36rpx;
  margin-right: 12rpx;
}

.faq-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.faq-list {
  padding: 10rpx 0;
}

.faq-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.faq-item:last-of-type {
  border-bottom: none;
}

.faq-question {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.faq-toggle {
  font-size: 24rpx;
  color: #22c55e;
  margin-left: 20rpx;
}

.faq-answer {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  margin: 10rpx 0 20rpx;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  border-left: 4rpx solid #22c55e;
}
</style>
